<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tj {
            background-color: #00bfff;
            margin-left: 5px;
            border: 1px solid red;
            border-radius: 5px;
        }

        .ghbs {
            background-color: #daa520;
            margin-left: 5px;
            border: 1px solid red;
            border-radius: 5px;
            margin-right: 5px;
        }

        table {
            margin-top: 50px;
            border-spacing: 0 1px;
        }

        th,
        td {
            width: 200px;
            height: 10px;
        }

        tbody tr {
            background-color: #6495ed;
        }
        tbody tr:nth-of-type(2n){
            background-color: #5f9ea0;
        }
        .sc {
            background-color: transparent;
            border: 1px solid #fff;
        }
    </style>
</head>

<body>
    姓名：<input type="text"> 年龄：<input type="text">学期：
    <select onchange="f()">
        <option value=""></option>
        <option value="p0">p0</option>
        <option value="p1">p1</option>
        <option value="p2">p2</option>
        <option value="p3">p3</option>
        <option value="p4">p4</option>
        <option value="p5">p5</option>
        <option value="p6">p6</option>
    </select>
    <button onclick="add()" class="tj">添加</button><button class="ghbs" onclick="bss(this)">开启隔行变色</button><span></span>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>学期</th>
                <th>操作</th>
            </tr>
        <tbody align="center">

        </tbody>
        </thead>
    </table>
</body>

</html>
<script>
    var inp = document.querySelectorAll("input")
    var sel = document.querySelector("select")
    var tb = document.querySelector("tbody")
    var span = document.querySelector("span")
    var hbs = document.querySelector(".ghbs")
    var zt = 0
    function set(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }
    function get() {
        var data = localStorage.getItem('data')
        if (data != null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    function add() {
        var data = get()
        data.push({
            xm: inp[0].value,
            nl: inp[1].value,
            xq: sel.value
        })
        set(data)
        xr()
    }
    function xr() {
        tb.innerHTML = ''
        var data = get()
        for (i = 0; i < data.length; i++) {
            var tr = document.createElement("tr")
            tr.innerHTML = `
                <td>${i + 1}</td>
                <td>${data[i].xm}</td>
                <td>${data[i].nl}</td>
                <td>${data[i].xq}</td>
                <td onclick='sc(${i})'>删除</td>
            `;
            tb.appendChild(tr)
            if (inp[0].value == '' || inp[1].value == '' || sel.value == '') {
                span.innerHTML = '信息不完整'
            } else {
                span.innerHTML = ''
            }
            inp[0].value = ''
            inp[1].value = ''
            sel.value = ''
        }
        
    }
    xr()
    function bss(a) {
        if (zt == 0) {
            a.innerHTML = '关闭隔行变色'
            tb.addEventListener('mouseover', function (e) {
                e.target.parentNode.style.backgroundImage = 'linear-gradient(to left, yellow, skyblue)'
            })
            tb.addEventListener('mouseout', function (e) {
                e.target.parentNode.style.backgroundImage = '';
            })
            zt = 1
        } else {
            a.innerHTML = '开启隔行变色'
            tb.addEventListener('mouseover', function (e) {
                e.target.parentNode.style.backgroundImage = ''
            })
            tb.addEventListener('mouseout', function (e) {
                e.target.parentNode.style.backgroundImage = '';
            })
            zt = 0
        }

    }
    function sc(i) {
        if(confirm('是否删除此行')){
            var data = get()
            data.splice(i, 1)
            set(data)
            xr()
        }
    }
    f()
    function f() {
        if (inp[0].value == '' || inp[1].value == '' || sel.value == '') {
            span.innerHTML = '信息不完整'
        } else {
            span.innerHTML = ''
        }
    }
</script>